<template>
    <div>
         <div class="seach">
            <span>
                {{$t('sta')}}
                <el-select v-model="selApp.status" :placeholder="$t('plsset')" size="mini">
                    <el-option :label="'-' + $t('plsset') + '-'" :value="null"></el-option>
                    <el-option :label="$t('waitfortherelease')" value="INITIAL"></el-option>
                    <el-option :label="$t('vlid')" value="VALID"></el-option>
                    <el-option :label="$t('invlid')" value="INVALID"></el-option>
                </el-select>
            </span>
            <span class="seachStatus">
                {{$t('efftim')}}
                <el-date-picker :placeholder="$t('plsset')" v-model="tranctime" width="20%" type="daterange" :range-separator="$t('to')" :start-placeholder="$t('startdate')" :end-placeholder="$t('dateclosed')" format="yyyy-MM-dd" value-format="yyyy-MM-dd" size="mini"></el-date-picker>
            </span>
            <span class="seachStatus">
                {{$t('exptim')}}
                <el-date-picker :placeholder="$t('plsset')" v-model="loseEfficacyTime" size="mini" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
            </span>
            <span class="seachCSC">
                {{$t('funtype')}}
                <el-select v-model="selApp.bannerType" :placeholder="$t('plsset')" size="mini">
                    <el-option :label="'-' + $t('plsset') + '-'" :value="null"></el-option>
                    <el-option :label="$t('show')" value="SHOW"></el-option>
                    <el-option :label="$t('fun')" value="FUNCTION"></el-option>
                </el-select>
            </span>
            <span class="seachCSC">
                {{$t('subtsys')}}
                <el-select v-model="selApp.bannerSystem" :placeholder="$t('plsset')" size="mini">
                    <el-option :label="'-' + $t('plsset') + '-'" :value="null"></el-option>
                    <el-option :label="$t('opersystm')" value="SYS"></el-option>
                    <el-option :label="$t('persnlapp')" value="APP_PSN"></el-option>
                </el-select>
            </span>
            <el-button type="primary" @click="seachbanList" v-preventReClick>{{$t('qury')}}</el-button>
            <el-button type="warning" @click="showAddBan" v-preventReClick>{{$t('add')}}</el-button>
        </div>
        <!-- 内容区域 -->
        <el-card class="cardBox">
            <el-table border style="width: 100%" :data="appBan">
                <el-table-column type="index" :label="$t('sernum')">
                </el-table-column>
                <el-table-column prop="bannerSystem" :label="$t('subtsys')" min-width="144">
                </el-table-column>
                <el-table-column prop="bannerType" :label="$t('typ')" min-width="103">
                </el-table-column>
                <el-table-column prop="title" :label="$t('titl')" min-width="102">
                </el-table-column>
                <el-table-column :label="$t('pictr')" min-width="102">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.imgIds" :preview-src-list="getSrcList(scope.$index)"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="takeEffectTime" :label="$t('efftim')" min-width="141">
                </el-table-column>
                <el-table-column prop="loseEfficacyTime" :label="$t('exptim')" min-width="143">
                </el-table-column>
                <el-table-column prop="status" :label="$t('sta')" min-width="103">
                </el-table-column>
                <el-table-column prop="address" :label="$t('opratn')" width="137" fixed="right">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status !== $t('invlid')">
                            <el-link type="primary" @click="details(scope.row.id)">{{$t('detls')}}</el-link>
                            <el-link type="primary" @click="showEditApp(scope.row.id)" v-if="scope.row.status !== $t('invlid')">{{$t('mdfy')}}</el-link>
                            <el-link type="primary" @click="takeEfficacy (scope.row.id)" v-if="scope.row.status === $t('waitfortherelease')">{{$t('release')}}</el-link>
                            <el-link type="primary" @click="loseEfficacy (scope.row.id)" v-if="scope.row.status === $t('vlid')">{{$t('invlid')}}</el-link>
                        </span>
                        <el-link type="primary" @click="removeBanner(scope.row.id)">{{$t('dlte')}}</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="selApp.pageNum"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="selApp.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
        <el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false">
            <img width="100%" :src="addBanForm.imgIds">
        </el-dialog>
        <el-dialog :title="$t('addbanerofapp')" :visible.sync="addDialogVisible" width="30%" @close="addDialogVisibleClosed(addBanForm)" :close-on-click-modal='isOk' :modal-append-to-body="false">
            <el-form :ref="addBanForm" :rules="addBanRul" :model="addBanForm" label-width="80px" :hide-required-asterisk="true">
                <el-form-item :label="$t('functtitle')" prop="title" :placeholder="$t('plsipt')">
                    <el-input v-model="addBanForm.title"></el-input>
                </el-form-item>
                <el-form-item :label="$t('desgnsket')" prop="imgIds">
                    <el-upload style="padding-top: 20px" class="upload-demo" action="http://mhsb.tpddns.cn:8186/sys//manageImageServer/upload" :on-remove="handleRemove" :on-preview="handlePreview" :on-change="handleImg" :file-list="imgAed" :auto-upload="false" :limit="1" list-type="picture-card" ref="img">
                        <i class="el-icon-plus" v-if="imgAed.length <= 1"></i>
                        <div slot="tip" class="el-upload__tip">{{$t('jpgpngformat')}}</div>
                    </el-upload>
                </el-form-item>
                <el-form-item :label="$t('address')" prop="activityUrl" :placeholder="$t('plsipt')">
                    <el-input v-model.trim="addBanForm.activityUrl"></el-input>
                </el-form-item>
                <el-form-item :label="$t('sort')" prop="sort" :placeholder="$t('plsipt')">
                    <el-input v-model.trim="addBanForm.sort"></el-input>
                </el-form-item>
                <el-form-item :label="$t('efftim')" prop="takeEffectTime" :placeholder="$t('plsset')">
                    <el-date-picker class="sellong" :placeholder="$t('plsset')" v-model="addBanForm.takeEffectTime" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item :label="$t('exptim')" prop="loseEfficacyTime" :placeholder="$t('plsset')">
                    <el-date-picker class="sellong" :placeholder="$t('plsset')" v-model="addBanForm.loseEfficacyTime" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item :label="$t('systemtyp')" prop="bannerSystem" :placeholder="$t('plsipt')">
                    <el-select v-model="addBanForm.bannerSystem" :placeholder="$t('plsset')" class="sellong">
                        <el-option :label="$t('opersystm')" value="SYS"></el-option>
                        <el-option :label="$t('persnlapp')" value="APP_PSN"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('jumptyp')" prop="redirectType" :placeholder="$t('plsset')">
                    <el-select v-model="addBanForm.redirectType" :placeholder="$t('plsset')" class="sellong">
                        <el-option :label="$t('h5jump')" value="H5"></el-option>
                        <el-option :label="$t('native')" value="PRI"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('funtyps')" prop="bannerType">
                    <el-select v-model="addBanForm.bannerType" :placeholder="$t('plsset')" class="sellong">
                        <el-option :label="$t('show')" value="SHOW"></el-option>
                        <el-option :label="$t('fun')" value="FUNCTION"></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item :label="$t('sta')" prop="status">
                    <el-select v-model="addBanForm.status" :placeholder="$t('plsset')" class="sellong">
                        <el-option :label="$t('vlid')" value="VALID"></el-option>
                        <el-option :label="$t('invlid')" value="INVALID"></el-option>
                    </el-select>
                </el-form-item> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addAppBan(addBanForm)" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="addDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
        <!-- 1 -->
        <el-dialog :title="$t('apphomebnrdet')" :visible.sync="detDialogVisible" width="30%" :modal-append-to-body="false">
            <el-form :model="detBanForm" label-width="80px" :hide-required-asterisk="true">
                <el-form-item :label="$t('titl')">
                    <div class="bdBox">{{detBanForm.title}}</div>
                </el-form-item>
                <el-form-item :label="$t('sta')">
                    <div class="bdBox">{{detBanForm.status}}</div>
                </el-form-item>
                <el-form-item :label="$t('lnkaddres')">
                    <div class="bdBox">{{detBanForm.activityUrl}}</div>
                </el-form-item>
                <el-form-item :label="$t('jumptyp')">
                    <div class="bdBox">{{detBanForm.redirectType}}</div>
                </el-form-item>
                <el-form-item :label="$t('funtype')">
                    <div class="bdBox">{{detBanForm.bannerType}}</div>
                </el-form-item>
                <el-form-item :label="$t('systemtyp')">
                    <div class="bdBox">{{detBanForm.bannerSystem}}</div>
                </el-form-item>
                <el-form-item :label="$t('whelsort')">
                    <div class="bdBox">{{detBanForm.sort}}</div>
                </el-form-item>
                <el-form-item :label="$t('efftim')">
                    <div class="bdBox">{{detBanForm.takeEffectTime}}</div>
                </el-form-item>
                <el-form-item :label="$t('exptim')">
                    <div class="bdBox">{{detBanForm.loseEfficacyTime}}</div>
                </el-form-item>
                <el-form-item :label="$t('creatime')">
                    <div class="bdBox">{{detBanForm.sysGmtCreate}}</div>
                </el-form-item>
                <el-form-item :label="$t('picturecont')">
                    <el-image :src="detBanForm.imgIds"></el-image>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="detDialogVisible = false" v-preventReClick>{{$t('close')}}</el-button>
            </span>
        </el-dialog>
        <el-dialog :title="$t('modbnronapp')" :visible.sync="editDialogVisible" width="30%" @close="editDialogVisibleClosed(editBanForm)" :close-on-click-modal='isOk' :modal-append-to-body="false">
           <el-form :ref="editBanForm" :rules="editBanRul" :model="editBanForm" label-width="80px" :hide-required-asterisk="true">
                <el-form-item :label="$t('functtitle')" prop="title" :placeholder="$t('plsipt')">
                    <el-input v-model="editBanForm.title"></el-input>
                </el-form-item>
                <el-form-item :label="$t('desgnsket')" prop="imgIds">
                    <el-upload style="padding-top: 20px" class="upload-demo" action="http://mhsb.tpddns.cn:8186/sys//manageImageServer/upload" :on-remove="handleRemove" :on-preview="handlePreview" :on-change="handleImg" :file-list="imgAed" :auto-upload="false" :limit="1" list-type="picture-card" ref="img">
                        <i class="el-icon-plus" v-if="imgAed.length <= 1"></i>
                        <div slot="tip" class="el-upload__tip">{{$t('jpgpngformat')}}</div>
                    </el-upload>
                </el-form-item>
                <el-form-item :label="$t('address')" prop="activityUrl" :placeholder="$t('plsipt')">
                    <el-input v-model.trim="editBanForm.activityUrl"></el-input>
                </el-form-item>
                <el-form-item :label="$t('sort')" prop="sort" :placeholder="$t('plsipt')">
                    <el-input v-model.trim="editBanForm.sort"></el-input>
                </el-form-item>
                <el-form-item :label="$t('efftim')" prop="takeEffectTime" :placeholder="$t('plsset')">
                    <el-date-picker class="sellong" :placeholder="$t('plsset')" v-model="editBanForm.takeEffectTime" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item :label="$t('exptim')" prop="loseEfficacyTime" :placeholder="$t('plsset')">
                    <el-date-picker class="sellong" :placeholder="$t('plsset')" v-model="editBanForm.loseEfficacyTime" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item :label="$t('systemtyp')" prop="bannerSystem" :placeholder="$t('plsipt')">
                    <el-select v-model="editBanForm.bannerSystem" :placeholder="$t('plsset')" class="sellong">
                        <el-option :label="$t('opersystm')" value="SYS"></el-option>
                        <el-option :label="$t('persnlapp')" value="APP_PSN"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('jumptyp')" prop="redirectType" :placeholder="$t('plsset')">
                    <el-select v-model="editBanForm.redirectType" :placeholder="$t('plsset')" class="sellong">
                        <el-option :label="$t('h5jump')" value="H5"></el-option>
                        <el-option :label="$t('native')" value="PRI"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('funtyps')" prop="bannerType">
                    <el-select v-model="editBanForm.bannerType" :placeholder="$t('plsset')" class="sellong">
                        <el-option :label="$t('show')" value="SHOW"></el-option>
                        <el-option :label="$t('fun')" value="FUNCTION"></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item :label="$t('sta')" prop="status">
                    <el-select v-model="editBanForm.status" :placeholder="$t('plsset')" class="sellong">
                        <el-option :label="$t('vlid')" value="VALID"></el-option>
                        <el-option :label="$t('invlid')" value="INVALID"></el-option>
                    </el-select>
                </el-form-item> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editBan(editBanForm)" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="editDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    appbanlist,
    appbanadd,
    upappimg,
    appbandetails,
    appbanedit,
    delappbanner
} from '@/libs/reqlist.js'
export default {
    data () {
        var isNumberVlidator = (rule, value, callback) => {
            var pattern = /^([0-9]{1,2})?$/
            if (!pattern.test(value)) {
                return callback(new Error(this.$t('plsentthenum')))
            } else {
                callback()
            }
        }
        return {
            tranctime: null,
            takeEffectTime: null,
            loseEfficacyTime: null,
            picedit: false,
            name: '',
            isOk: false,
            selApp: {
                bannerType: null,
                bannerSystem: null,
                title: null,
                status: null,
                redirectType: null,
                takeEffectTime: null,
                loseEfficacyTime: null,
                pageNum: 1,
                pageSize: 10
            },
            total: 0,
            appBan: [],
            imgArr: [],
            imgAed: [],
            imgObj: {},
            disabled: false,
            dialogVisible: false,
            addDialogVisible: false,
            detDialogVisible: false,
            editDialogVisible: false,
            addBanForm: {
                title: '',
                sort: '',
                imgIds: '',
                status: 'INITIAL',
                bannerType: '',
                bannerSystem: '',
                redirectType: '',
                activityUrl: '',
                takeEffectTime: '',
                loseEfficacyTime: ''
            },
            addBanRul: {
                title: [
                    { required: true, message: this.$t('titlecntbemt'), trigger: 'blur' }
                ],
                activityUrl: [
                    { required: true, message: this.$t('lnkadrscntbemt'), trigger: 'blur' }
                ],
                takeEffectTime: [
                    { required: true, message: this.$t('effctimecntbemt'), trigger: 'blur' }
                ],
                sort: [
                    { required: true, message: this.$t('sortcntbemt'), trigger: 'blur' },
                    { validator: isNumberVlidator, trigger: 'blur' }
                ],
                loseEfficacyTime: [
                    { required: true, message: this.$t('expratimecntbemt'), trigger: 'blur' }
                ],
                bannerSystem: [
                    { required: true, message: this.$t('systypcntbemt'), trigger: 'blur' }
                ],
                redirectType: [
                    { required: true, message: this.$t('jumptypcntbemt'), trigger: 'blur' }
                ],
                bannerType: [
                    { required: true, message: this.$t('funtiontypcntbemt'), trigger: 'blur' }
                ],
                status: [
                    { required: true, message: this.$t('stacntbemt'), trigger: 'blur' }
                ]
            },
            detBanForm: {},
            editBanForm: {},
            editBanRul: {
                title: [
                    { required: true, message: this.$t('titlecntbemt'), trigger: 'blur' }
                ],
                activityUrl: [
                    { required: true, message: this.$t('lnkadrscntbemt'), trigger: 'blur' }
                ],
                takeEffectTime: [
                    { required: true, message: this.$t('effctimecntbemt'), trigger: 'blur' }
                ],
                sort: [
                    { required: true, message: this.$t('sortcntbemt'), trigger: 'blur' },
                    { validator: isNumberVlidator, trigger: 'blur' }
                ],
                loseEfficacyTime: [
                    { required: true, message: this.$t('expratimecntbemt'), trigger: 'blur' }
                ],
                bannerSystem: [
                    { required: true, message: this.$t('systypcntbemt'), trigger: 'blur' }
                ],
                redirectType: [
                    { required: true, message: this.$t('jumptypcntbemt'), trigger: 'blur' }
                ],
                bannerType: [
                    { required: true, message: this.$t('funtiontypcntbemt'), trigger: 'blur' }
                ],
                status: [
                    { required: true, message: this.$t('stacntbemt'), trigger: 'blur' }
                ]
            },
            editSta: {
                id: '',
                status: ''
            }
        }
    },
    methods: {
        seachbanList () {
            if (this.tranctime === null) this.selApp.takeEffectTime = ''
            if (this.tranctime !== null) this.selApp.takeEffectTime = this.tranctime[0] + ' 00:00:00'
            if (this.tranctime === null) this.selApp.loseEfficacyTime = ''
            if (this.tranctime !== null) this.selApp.loseEfficacyTime = this.tranctime[1] + ' 23:00:00'
            this.selApp.pageNum = 1
            this.getbanList()
        },
        getbanList () {
            this.selApp.takeEffectTime = this.selApp.takeEffectTime + ''
            this.selApp.loseEfficacyTime = this.selApp.loseEfficacyTime + ''
            appbanlist(JSON.stringify(this.selApp)).then(res => {
                this.imgArr = []
                this.total = res.data.data.total - 0
                this.appBan = res.data.data.list
                if (!this.appBan) return false
                this.appBan.forEach((item, index) => {
                    if (item.bannerSystem === 'SYS') item.bannerSystem = this.$t('opersystm')
                    if (item.bannerSystem === 'APP_PSN') item.bannerSystem = this.$t('persnlapp')
                    if (item.status === 'INITIAL') item.status = this.$t('waitfortherelease')
                    if (item.status === 'VALID') item.status = this.$t('vlid')
                    if (item.status === 'INVALID') item.status = this.$t('invlid')
                    if (item.bannerType === 'SHOW') item.bannerType = this.$t('show')
                    if (item.bannerType === 'FUNCTION') item.bannerType = this.$t('fun')
                    this.imgArr.push(item.imgIds)
                })
            })
        },
        // 监听页面展示数据条数变化
        handleSizeChange (newSize) {
            this.selApp.pageSize = newSize
            this.getbanList()
        },
        // 监听总页数变化
        handleCurrentChange (newNum) {
            this.selApp.pageNum = newNum
            this.getbanList()
        },
        showAddBan () {
            this.addDialogVisible = true
        },
        handlePictureCardPreview() {
            this.dialogVisible = true
        },
        handlePreview(file) {
        },
        handleImg(file, fileList) {
            if (fileList.length !== 0) {
                this.imgObj = fileList[0]
                this.name = fileList[0].name
                this.picedit = true
            }
        },
        handleRemove(file, fileList) {
            if (this.imgObj) this.imgObj.raw = ''
            if (this.editBanForm.imgIds) this.editBanForm.imgIds = ''
            if (fileList.length !== 0) {
                this.imgObj = fileList[0]
                this.name = fileList[0].name
                this.picedit = true
            }
        },
        async uploadImg(type) {
            var formData = new FormData()
            // 上传图片
            formData.append('name', '')
            formData.append('file', this.imgObj.raw)
            if (this.imgObj === '') {
                this.$message.error(this.$t('plsseltheimg'))
                return false
            }
            await upappimg(formData).then(res => {
                if (res.data.code === '000000') {
                    if (type === 'add') {
                        this.addBanForm.imgIds = res.data.data.remoteFileName
                    } else {
                        this.editBanForm.imgIds = res.data.data.remoteFileName
                    }
                }
            })
        },
        addDialogVisibleClosed (form) {
            this.addDialogVisible = false
            this.imgAed = []
            this.$refs[form].resetFields()
            this.$refs[form].clearValidate()
        },
        editDialogVisibleClosed (form) {
            this.editDialogVisible = false
            this.imgAed = []
            this.$refs[form].resetFields()
        },
        async addAppBan (form) {
            this.$refs[form].validate(async valid => {
                if (!valid) return false
                this.addBanForm.title = this.addBanForm.title.trim()
                this.addBanForm.takeEffectTime = this.addBanForm.takeEffectTime + ' 00:00:00'
                this.addBanForm.loseEfficacyTime = this.addBanForm.loseEfficacyTime + ' 23:00:00'
                await this.uploadImg('add')
                if (this.addBanForm.imgIds === '') {
                    this.$message.error(this.$t('plsseltheimg'))
                    return false
                }
                await appbanadd(JSON.stringify(this.addBanForm)).then(res => {
                    if (res.data.code === '000000') {
                        this.$message({
                            message: this.$t('funtionaddsuc'),
                            type: 'success'
                        })
                        this.addDialogVisible = false
                        this.getbanList()
                    }
                })
            })
        },
        details (id) {
            appbandetails(JSON.stringify(id)).then(res => {
                if (res.data.code === '992118') {
                    this.$message.error(res.data.msg)
                    this.detDialogVisible = false
                    return false
                }
                if (res.data.code === '000000') {
                    this.detBanForm = res.data.data
                    if (this.detBanForm.bannerSystem === 'SYS') this.detBanForm.bannerSystem = this.$t('opersystm')
                    if (this.detBanForm.bannerSystem === 'APP_PSN') this.detBanForm.bannerSystem = this.$t('persnlapp')
                    if (this.editBanForm.status === 'INITIAL') this.detBanForm.status = this.$t('waitfortherelease')
                    if (this.detBanForm.status === 'VALID') this.detBanForm.status = this.$t('vlid')
                    if (this.editBanForm.status === 'INVALID') this.detBanForm.status = this.$t('invlid')
                    if (this.editBanForm.redirectType === 'PRI') this.detBanForm.redirectType = this.$t('native')
                    if (this.detBanForm.redirectType === 'H5') this.detBanForm.redirectType = this.$t('h5jump')
                    if (this.detBanForm.bannerType === 'SHOW') this.detBanForm.bannerType = this.$t('show')
                    if (this.detBanForm.bannerType === 'FUNCTION') this.detBanForm.bannerType = this.$t('fun')
                    this.detBanForm.takeEffectTime = this.detBanForm.takeEffectTime.substring(0, 10)
                    this.detBanForm.loseEfficacyTime = this.detBanForm.loseEfficacyTime.substring(0, 10)
                    this.detDialogVisible = true
                }
            })
        },
        async showEditApp (id) {
            appbandetails(JSON.stringify(id)).then(res => {
                if (res.data.code === '992118') {
                    this.$message.error(res.data.msg)
                    this.editDialogVisible = false
                    return false
                }
                if (res.data.code === '000000') {
                    this.editBanForm = res.data.data
                    if (this.editBanForm.bannerSystem === 'SYS') this.editBanForm.bannerSystem = this.$t('opersystm')
                    if (this.editBanForm.bannerSystem === 'APP_PSN') this.editBanForm.bannerSystem = this.$t('persnlapp')
                    if (this.editBanForm.redirectType === 'H5') this.editBanForm.redirectType = this.$t('h5jump')
                    if (this.editBanForm.redirectType === 'PRI') this.editBanForm.redirectType = this.$t('native')
                    this.imgAed.push({ name: 'jojo', url: this.editBanForm.imgIds })
                    // this.editBanForm.takeEffectTime = this.editBanForm.takeEffectTime.substring(0, 10)
                    // this.editBanForm.loseEfficacyTime = this.editBanForm.loseEfficacyTime.substring(0, 10)
                    this.editBanForm.id = id
                    this.editDialogVisible = true
                }
            })
        },
        async editBan (form) {
            this.$refs[form].validate(async valid => {
                if (!valid) return false
                this.editBanForm.title = this.editBanForm.title.trim()
                this.editBanForm.takeEffectTime = this.editBanForm.takeEffectTime + ' 00:00:00'
                this.editBanForm.loseEfficacyTime = this.editBanForm.loseEfficacyTime + ' 23:00:00'
                if (this.editBanForm.bannerSystem === this.$t('opersystm')) this.editBanForm.bannerSystem = 'SYS'
                if (this.editBanForm.bannerSystem === this.$t('persnlapp')) this.editBanForm.bannerSystem = 'APP_PSN'
                if (this.editBanForm.bannerType === this.$t('show')) this.editBanForm.bannerType = 'SHOW'
                if (this.editBanForm.bannerType === this.$t('fun')) this.editBanForm.bannerType = 'FUNCTION'
                if (this.editBanForm.redirectType === this.$t('h5jump')) this.editBanForm.redirectType = 'H5'
                if (this.editBanForm.redirectType === this.$t('native')) this.editBanForm.redirectType = 'PRI'
                // this.editBanForm.takeEffectTime = this.editBanForm.takeEffectTime + ''
                // this.editBanForm.loseEfficacyTime = this.editBanForm.loseEfficacyTime + ''
                delete this.editBanForm.sysGmtCreate
                delete this.editBanForm.sysGmtModified
                if (this.editBanForm.imgIds) this.editBanForm.imgIds = this.editBanForm.imgIds.split('?')[0].split('/')[3]
                if (this.picedit) {
                    await this.uploadImg('edit')
                    this.picedit = false
                }
                if (!this.editBanForm.imgIds) {
                    this.$message.error(this.$t('plsseltheimg'))
                    return false
                }
                await appbanedit(JSON.stringify(this.editBanForm)).then(res => {
                    if (res.data.code === '000000') {
                        this.$message({
                            message: this.$t('modyfunsuc'),
                            type: 'success'
                        })
                        this.editDialogVisible = false
                        this.imgAed = []
                        this.getbanList()
                    } else {
                        this.$message.error(this.$t('errplsmodifyagn'))
                    }
                })
            })
        },
        takeEfficacy (id) {
            this.editSta.id = id
            this.editSta.status = 'VALID'
            this.$confirm(this.$t('whetherissued'), this.$t('release'), {
                cancelButtonText: this.$t('cnl'),
                confirmButtonText: this.$t('cfm')
            }).then(async () => {
                await appbanedit(JSON.stringify(this.editSta)).then(res => {
                    if (res.data.code === '000000') {
                        this.getbanList()
                        this.$message({
                            message: this.$t('sucfuloper'),
                            type: 'success'
                        })
                    }
                })
            })
        },
        loseEfficacy (id) {
            this.editSta.id = id
            this.editSta.status = 'INVALID'
            this.$confirm(this.$t('whetoundtheban'), this.$t('invlid'), {
                cancelButtonText: this.$t('cnl'),
                confirmButtonText: this.$t('cfm')
            }).then(async () => {
                await appbanedit(JSON.stringify(this.editSta)).then(res => {
                    if (res.data.code === '000000') {
                        this.getbanList()
                        this.$message({
                            message: this.$t('sucfuloper'),
                            type: 'success'
                        })
                    }
                })
            })
        },
        getSrcList (index) {
            return this.imgArr.slice(index).concat(this.imgArr.slice(0, index))
        },
        removeBanner (banId) {
            this.$confirm(this.$t('delcurban'), this.$t('delban'), {
                cancelButtonText: this.$t('cnl'),
                confirmButtonText: this.$t('cfm')
            }).then(async () => {
                await delappbanner(JSON.stringify({ id: banId })).then(res => {
                    if (res.data.code === '000000') {
                        this.getbanList()
                        this.$message({
                            message: this.$t('dltfunsuc'),
                            type: 'success'
                        })
                    }
                })
            })
        }
    },
    mounted () {
        this.selApp.pageNum = Math.ceil(this.total / this.selApp.pageSize)
        this.getbanList()
    }
}
</script>

<style lang="less" scoped>
@import './appEf.less';
</style>
